<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('新增项目')">
    <!-- 页面特定样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css">
    <style>
        /* 统一边距和圆角 */
        .card {
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .card-header {
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 1rem 1.25rem;
            background-color: white;
        }
        
        /* 按钮美化 */
        .btn {
            border-radius: 4px;
            font-weight: 500;
            padding: 0.5rem 1rem;
        }
        
        /* 表单控件样式 */
        .form-control:focus {
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15);
            border-color: #80bdff;
        }
        
        /* 错误提示样式 */
        .form-error {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2>新增项目</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-transparent px-0">
                                <li class="breadcrumb-item"><a th:href="@{/}">首页</a></li>
                                <li class="breadcrumb-item"><a th:href="@{/project/list}">项目列表</a></li>
                                <li class="breadcrumb-item active" aria-current="page">新增项目</li>
                            </ol>
                        </nav>
                    </div>
                    <div>
                        <a th:href="@{/}" class="btn btn-outline-secondary mr-2">
                            <i class="fa fa-home"></i> 返回首页
                        </a>
                        <a th:href="@{/project/list}" class="btn btn-outline-primary">
                            <i class="fa fa-list"></i> 项目列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa fa-plus-circle mr-2"></i>项目信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="message-area"></div>
                        
                        <form id="projectForm">
                            <div class="form-group">
                                <label for="name">项目名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" placeholder="请输入项目名称" required>
                                <div id="nameError" class="form-error d-none">项目名称不能为空</div>
                            </div>
                            
                            <div class="form-group">
                                <label for="description">项目描述</label>
                                <textarea class="form-control" id="description" rows="3" placeholder="请输入项目描述"></textarea>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="startDate">开始日期</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                        </div>
                                        <input type="text" class="form-control datepicker" id="startDate" placeholder="选择开始日期">
                                    </div>
                                    <div id="startDateError" class="form-error d-none">开始日期格式不正确</div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="endDate">结束日期</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                        </div>
                                        <input type="text" class="form-control datepicker" id="endDate" placeholder="选择结束日期">
                                    </div>
                                    <div id="endDateError" class="form-error d-none">结束日期不能早于开始日期</div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="managerId">项目经理</label>
                                <select class="form-control" id="managerId">
                                    <option value="">-- 请选择项目经理 --</option>
                                    <option th:each="manager : ${managers}" th:value="${manager.id}" th:text="${manager.realName}"></option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="status">项目状态</label>
                                <select class="form-control" id="status">
                                    <option value="1">未开始</option>
                                    <option value="2">进行中</option>
                                    <option value="3">已完成</option>
                                    <option value="4">已取消</option>
                                </select>
                            </div>
                            
                            <div class="text-right">
                                <a th:href="@{/project/list}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> 返回列表
                                </a>
                                <button type="button" id="submitBtn" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fa fa-info-circle mr-2"></i>帮助信息</h5>
                    </div>
                    <div class="card-body">
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目名称：</strong>请输入项目的正式名称，该名称将显示在项目列表中。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目描述：</strong>简要描述项目的目标、范围和背景。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>开始/结束日期：</strong>项目的计划开始和结束日期。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目经理：</strong>负责管理该项目的用户，具有项目的全部管理权限。</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>项目状态：</strong>项目的当前状态，可以根据项目进展随时更新。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        $(function() {
            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                autoclose: true,
                todayHighlight: true
            });
            
            // 表单验证
            function validateForm() {
                let isValid = true;
                
                // 验证项目名称
                if (!$('#name').val().trim()) {
                    $('#nameError').removeClass('d-none');
                    $('#name').addClass('is-invalid');
                    isValid = false;
                } else {
                    $('#nameError').addClass('d-none');
                    $('#name').removeClass('is-invalid');
                }
                
                // 验证日期
                const startDate = $('#startDate').val();
                const endDate = $('#endDate').val();
                
                if (startDate && endDate) {
                    const start = new Date(startDate);
                    const end = new Date(endDate);
                    
                    if (end < start) {
                        $('#endDateError').removeClass('d-none');
                        $('#endDate').addClass('is-invalid');
                        isValid = false;
                    } else {
                        $('#endDateError').addClass('d-none');
                        $('#endDate').removeClass('is-invalid');
                    }
                }
                
                return isValid;
            }
            
            // 输入框变更时清除错误
            $('#name').on('input', function() {
                if ($(this).val().trim()) {
                    $('#nameError').addClass('d-none');
                    $(this).removeClass('is-invalid');
                }
            });
            
            // 表单提交
            $('#submitBtn').click(function() {
                // 表单验证
                if (!validateForm()) {
                    return;
                }
                
                // 显示加载状态
                const $btn = $(this);
                $btn.prop('disabled', true);
                $btn.html('<i class="fa fa-spinner fa-spin"></i> 保存中...');
                
                // 收集表单数据
                var projectData = {
                    name: $('#name').val().trim(),
                    description: $('#description').val().trim(),
                    startDate: $('#startDate').val() ? $('#startDate').val() : null,
                    endDate: $('#endDate').val() ? $('#endDate').val() : null,
                    managerId: $('#managerId').val() ? parseInt($('#managerId').val()) : null,
                    status: parseInt($('#status').val())
                };
                
                // 发送请求
                $.ajax({
                    url: '/risk-management/project/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(projectData),
                    success: function(response) {
                        if (response.code === 200) {
                            showMessage('项目添加成功，即将跳转到项目列表...', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/project/list';
                            }, 1500);
                        } else {
                            showMessage(response.message || '项目添加失败', 'danger');
                            $btn.prop('disabled', false);
                            $btn.html('<i class="fa fa-save"></i> 保存');
                        }
                    },
                    error: function(xhr) {
                        console.error('提交失败:', xhr);
                        let errorMsg = '系统错误，请稍后再试';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showMessage(errorMsg, 'danger');
                        $btn.prop('disabled', false);
                        $btn.html('<i class="fa fa-save"></i> 保存');
                    }
                });
            });
            
            function showMessage(message, type) {
                $('#message-area').html(
                    '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>'
                );
                
                // 滚动到消息区域
                $('html, body').animate({
                    scrollTop: $('#message-area').offset().top - 20
                }, 100);
            }
        });
    </script>
</body>
</html> 